<template>
  <div>
    <div class="dashboard-container">
      <span class="little"></span>
      <div class="dashboard-text">融资需求管理</div>
    </div>
    <el-card class="requestbox">
      <div class="tittlebox">
        <!-- 总数 -->
        <div class="yellowbox">
          <div class="leftbox">
            <img src="../../images/request.png" alt="" />
          </div>
          <div class="rightbox">
            <div class="sum">{{ total }}</div>
            <div>总数</div>
          </div>
        </div>
        <el-form style="display: flex; margin-left: 40px; margin-top: 24px">
          <el-form-item style="margin-right: 20px">
            <el-input placeholder="企业名称" prefix-icon="el-icon-search" v-model="form.input">
              <i slot="suffix" class="el-icon-circle-close" @click="form.input = ''"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <div style="display: flex;">
              <div>
                <button
                  style="width: 100px; height: 40px;margin-right: 20px;background-color: #216cff;color: aliceblue;border:0;border-radius: 5px;"
                  @click="sougsuo">
                  查询
                </button>
              </div>
              <div>
                <button type="primary" style="width: 100px; height: 40px;background-color:#7986a6;border:0;color: #fff;border-radius: 5px;"
                  @click="regiro">
                  重置
                </button>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="uploadcard">
      <div class="upload">
        <el-button class="firstbtn" @click="publicupload" :disabled="showExampleBtn.disabled">批量下载</el-button>
        <el-button class="secondbtn" @click="publicoutside" v-if="showPublishBox"
          style="background: green;color: #fff;">开启展示</el-button>
        <el-button class="secondbtn" @click="publicclose" v-else style="background: #7986a6;color: #fff;" :disabled="showExampleBtn.disabled">关闭展示</el-button>
      </div>
      <div class="table-container">
        <el-table :data="tableData" style="width: 100%" :border="false" :show-overflow-tooltip="false"
          @selection-change="handleSelectionChange" @select-all="handleSelectAll" :select-all="isAllSelected" stripe
          class="bigtable">
          <!-- 勾选框 -->
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="姓名/企业信息" prop="status">
            <template slot-scope="{ row }">
              {{ row.qyName }}
            </template>
          </el-table-column>
          <el-table-column label="用户名">
            <template slot-scope="{ row }">
              {{ row.username }}
            </template>
          </el-table-column>
          <el-table-column label="发布时间">
            <template slot-scope="{ row }">
              {{ row.gmtCreate | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="文件下载">
            <template slot-scope="{ row }">
              <i class="el-icon-download" style="font-weight: 900; color: #216cff"></i>
              <button style="color: #216cff;background-color:transparent;border: 0;"  :disabled="showExampleBtn.disabled" @click="uploadtxt(row)">下载融资需求</button>
            </template>
          </el-table-column>
          <!-- <el-table-column label="是否发布">
            <template slot-scope="{ row }">
              <el-switch v-model="row.enable" active-color="#13ce66" @change="handleChange(row.id, row.enable)"
                :disabled="showExampleBtn.disabled" inactive-color="#E7E9EE" :active-value="1" :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div style="display: flex;justify-content: center;">
                <button size="mini" type="primary" :disabled="showExampleBtn.disabled" @click="handleDelete(scope.row.id)"
                  style="
                    display: inline-block;
                    width: 52px;
                    height: 24px;
                    font-size: 16px;
                    font-weight: 500;
                    background-color: transparent;
                    border: none;
                  ">
                  删除
                </button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination background align="center" class="footerpage" layout="prev, pager, next"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="pageSize" :total="total" style="margin-top: 40px;">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {
  getListAdmin,
  rzselectLike,
  download,
  passOne,
  deleteOne,
  passMany,
  downloadMany,
  publicstatus
} from "@/api/nested";

export default {
  name: "Dashboard",
  data() {
    return {
      // 发布状态
      showPublishBox: localStorage.getItem('showPublishBox') === 'true', // 从localStorage获取保存的状态值
      // 用于保存勾选状态
      multipleSelection: [],
      searchText: "", //输入框
      isAllSelected: false, // 定义isAllSelected变量
      form: {
        input: "",
        status: "未认证",
        dropdown: "全部",
      },
      publicallow: true,
      username: this.$store.state.user.userInfo.username,
      tableData: [],
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 5, // 每页的数据条数
      publicarray: [],
      fileIdarray: [],
      adminId: this.$store.state.user.userInfo.id,
      username: this.$store.state.user.userInfo.username
    };
  },
  methods: {
    // 动态class的方法,根据状态的不同显示不同的颜色
    getStatusClass(status) {
      switch (status) {
        case "已认证":
          return "blue-text";
        case "待认证":
          return "green-text";
        case "未认证":
          return "red-text";
        default:
          return "";
      }
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getListAdmin();
    },
    async getListAdmin() {
      const res = await getListAdmin({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
      // console.log(this.tableData);
    },
    // 模糊搜索
    sougsuo() {
      rzselectLike({
        page: this.currentPage,
        qyName: this.form.input,
        size: this.pageSize,
      }).then((res) => {
        if (res.data.state === 20000) {
          const newdata = res.data.data.records;
          // console.log(newdata);
          this.tableData = newdata;
        }
      });
    },
    regiro() {
      this.getListAdmin()
    },
    // 文件下载
    uploadtxt(row) {
      download({ fileId: row.fileId }).then((res) => {
        let url = window.URL.createObjectURL(
          new Blob([res.data], { type: "application/pdf;chartset=UTF-8" })
        );
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", row.fileOriginName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
    // 融资需求发布
    handleChange(id, enable) {
      passOne({ id: id, enable: enable, adminId: this.adminId, username: this.username }).then((res) => {
        if (res.data.state === 20000) {
          this.$message.success('操作成功')
        } else {
          this.$message.error('操作失败请稍后重试')
        }
      });
    },
    // 发布展示
    publicoutside() {
      publicstatus({ status: '1' }).then(res => {
        if (res.data.state === 20000) {
          this.showPublishBox = false
          localStorage.setItem('showPublishBox', 'false'); // 将状态值保存到localStorage
          this.$message.success('已展示')
        }
      })
    },
    // 关闭发布展示
    publicclose() {
      publicstatus({ status: '0' }).then(res => {
        if (res.data.state === 20000) {
          this.showPublishBox = true
          localStorage.setItem('showPublishBox', 'true'); // 将状态值保存到localStorage
          this.$message.success('已关闭')
        }
      })
    },
    // 批量下载
    publicupload() {
      let ids = []
      this.fileIdarray.forEach(item => {
        ids.push(item.fileId)
      })
      console.log(ids);
      downloadMany({ ids: ids }).then((res) => {
        if (ids.length <= 0) {
          this.$message.error('请先勾选对应选项')
        } else {
          if (res.data) {
            let url = window.URL.createObjectURL(
              new Blob([res.data], { type: "application/zip;chartset=UTF-8" })
            );
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", '批量文件');
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            this.$message.success("文件批量下载成功");
            this.publicallow = true;
          } else {
            this.$message.error('文件下载失败')
          }
        }

      });
    },
    handleDelete(id) {
      // 删除操作
      this.$confirm("确定删除此项?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteOne({ id: id }).then((res) => {
            if (res.data.state === 20000) {
              this.$message.success("删除成功");
              if (this.tableData.length == 1 && this.currentPage != 1) {
                this.currentPage--
              }
              this.getListAdmin();
            } else {
              this.$message.error("删除失败请稍后重试");
              this.getListAdmin();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectAll(selected) {
    },
    handleSelectionChange(val) {
      console.log(val); // 打印当前勾选的行数据
      this.fileIdarray = val
      this.publicarray = val
      console.log(this.fileIdarray);
    },
  },
  created() {
    this.getListAdmin();
  },
  computed: {
    showExampleBtn() {
      const userRoles = this.$store.state.user.userInfo.id;
      if (userRoles !== 1) {
        return {
          disabled: true,
        };
      } else {
        return {
          disabled: false,
        };
      }
    },
  },
};
</script>

<style lang="scss" >
.dashboard-container {
  display: flex;
  padding: 10px 26px 8px 26px;

  .little {
    display: inline-block;
    width: 5px;
    height: 20px;
    background: #3064fc;
    margin-right: 6px;
  }

  .dashboard-text {
    font-size: 16px;
  }
}

.requestbox {
  width: 99%;
  height: 130px;
  margin-left: 8px;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;

  .tittlebox {
    display: flex;

    // margin-top: 20px;
    // justify-content: space-between;
    .yellowbox {
      display: flex;
      justify-content: center;
      align-items: center;

      .rightbox {
        :nth-child(2) {
          width: 48px;
          height: 16px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #2e2e2e;
          // line-height: 10px;
        }
      }

      .sum {
        font-weight: bold;
        color: #fabc00;
      }
    }
  }
}

.uploadcard {
  margin-top: 10px;
  width: 99%;
  max-height: 1200px;
  margin-left: 8px;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;

  .upload {
    margin-bottom: 20px;

    .firstbtn {
      background-color: #4877e8;
      color: #fff;
    }

    .secondbtn {
      background-color: #f37800;
      color: #fff;
    }
  }
}

.table-container {
  /* padding: 60px; */
  // margin-top: 20px;
  // margin-bottom: 20px;
}

.table-container .el-table__header th {
  color: #216cff;
  font-size: 16px;
  background-color: #f3f6fb;
  /* border: 1px solid #e5e5e3; */
  text-align: center;
}

.table-container .el-table__body td {
  /* border: 1px solid #ddd; */
  text-align: center;
  font-weight: bold;
}

/* 鼠标移过时的样式 */
button:disabled:hover {
  cursor: not-allowed;
  background-color: red;
}

/* 正常情况下的样式 */
button:not(:disabled) {
  cursor: pointer;
}
</style>